<!-- 
/* ************************************************************************
 *                        _oo0oo_
 *                       o8888888o
 *                       88" . "88
 *                       (| -_- |)
 *                       0\  =  /0
 *                     ___/`---'\___
 *                   .' \\|     |// '.
 *                  / \\|||  :  |||// \
 *                 / _||||| -:- |||||- \
 *                |   | \\\  - /// |   |
 *                | \_|  ''\---/''  |_/ |
 *                \  .-\__  '-'  ___/-. /
 *              ___'. .'  /--.--\  `. .'___
 *           ."" '<  `.___\_<|>_/___.' >' "".
 *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *          \  \ `_.   \_ __\ /__ _/   .-` /  /
 *      =====`-.____`.___ \_____/___.-`___.-'=====
 *                        `=---='
 * 
 * 
 ************************************************************************
 *		本代码已经过佛祖开光处理，佛祖保佑，永不宕机，永无BUG。
 *		文件名称：略
 *		简要描述：兑换确认页面
 *		作   者：Frank
 *		创建日期：2023/07/26
 *		联系方式：邮箱: goodboybbc@outlook.com, 微信：goodboybbc 可提供后台源码(Node.js开发)和数据库(MySQL)

 *		Copyright(c)	2023-2033   Frank   本项目已取得软件著作权和备案，仅供学习研究。软件著作权登记号：软著登字第12572259号 备案号:川公网安备51012202001748 蜀ICP备2024058077号-1 
 ********************************修改记录********************************
		作	者			修改日期				修改内容 
		Frank			2023/07/26			创建文件
 *************************************************************************/	
 -->
<template>
	<view class="main">
		<ModalDialog v-if="isShowDlg" :data="dlgData"></ModalDialog>
		<view class="order">
			<view class="order-com">
				<view class="order-com-img-box">
					<image class="order-com-img" :src="commodity.main_img" mode=""></image>
				</view>
				<text class="order-com-name">{{commodity.name}}</text>
			</view>
			<view class="order-trans">
				<text class="order-trans-label">配送服务</text>
				<text class="order-trans-text">免运费</text>
			</view>
		</view>
		<view class="addr" @tap="goMyPath">
			<view class="addr-info">
				<view class="addr-info-left">
					<view class="addr-info-left-span"></view>
					<text class="addr-info-left-text">信息填写</text>
				</view>
				<view class="addr-info-right">请认真填写，避免兑换失败</view>
			</view>
			<view class="addr-path">
				<view class="addr-path-left">收货地址:</view>
				<view class="addr-path-right">
					<template v-if="userStore.address.list.length > 0">
						<view class="addr-path-right-user">
							{{userStore.address.list[pathIndex].name}} &nbsp;
							{{userStore.address.list[pathIndex].tel}} 
						</view>
						<view class="addr-path-right-area">
							<view class="addr-path-right-area-text">
								{{userStore.address.list[pathIndex].area}} 
							</view>
							<text class="addr-path-right-area-arrow">></text>
						</view>
					</template>
					<template v-else>
						<view>请添加收货地址</view>
					</template>
				</view>
			</view>
			<view class="addr-memo">
				<view class="addr-memo-label">特别备注:</view>
				<input class='addr-memo-text' v-model="memo" placeholder="尺寸/备注需求等(可不填)" @click.stop="" /></view>
		</view>
		<view class="op">
			<view class="op-rule">
				<label class="">
					<checkbox :checked="isAgreeRule" @tap="isAgreeRule = !isAgreeRule" />
					<view class="op-rule-text">我已阅读并同意
						<text class="op-rule-text-rule" @tap="goRule">&lt;&lt;兑换规则&gt;&gt;</text>
					</view>
				</label>
			</view>
			<view class="op-confirm" @tap="onBtnExchange">
				<image class="op-confirm-img" :src="isAgreeRule ? btnActive : btnDisabled" mode="">
				</image>
				<text class="op-confirm-text">确定并兑换</text>
			</view>
		</view>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import ModalDialog from '../../components/common/ModalDialog'
	import { mapStores, mapActions, mapState } from 'pinia'
	import { commodityStore } from '@/store/modules/commodityStore.js'
	import { userStore } from '@/store/modules/userStore.js'
	export default {
		components:{
			ModalDialog
		},
		data() {
			return {
				cateId:0,
				commodityIdx:0,
				commodity:Object,
				pathIndex:0,
				memo:'',
				btnDisabled:'../../static/img/common/btn/2.png',
				btnActive:'../../static/img/common/btn/3.png',
				isAgreeRule:false,
				
				// 对话框
				isShowDlg:false,
				dlgData:{
					title:'',
					text:'',
					cbTap:()=>{}
				}
			}
		},
		computed:{
			...mapStores(commodityStore, userStore)
		},
		methods: {
			goMyPath(){
				uni.navigateTo({
					url:'/pages/my-path/my-path?isSelPath=true'
				})
			},
			goRule(){
				uni.navigateTo({
					url:'/pages/exchange-rule/exchange-rule'
				})
			},
			onBtnExchange(){
				if(!this.isAgreeRule){
					this.dlgData.title = '温馨提示';
					this.dlgData.text = `请先同意兑换规则哦~`
					this.dlgData.btnText = '好的'
					this.dlgData.cbTap = () => {
						this.isShowDlg = false;
					}
					this.isShowDlg = true;				
					return;
				}
				
				if(this.pathIndex < 0){
					this.dlgData.title = '温馨提示';
					this.dlgData.text = `请先填写收货地址哦`
					this.dlgData.btnText = '好的'
					this.dlgData.cbTap = () => {
						this.isShowDlg = false;
					}
					this.isShowDlg = true;				
					return;
				}
				
				let address = this.userStore.address.list[this.pathIndex].name + ' '
								+ this.userStore.address.list[this.pathIndex].tel + ' '
								+ this.userStore.address.list[this.pathIndex].area 
								+ this.userStore.address.list[this.pathIndex].detailAddr; 
				
				let useCrystal = this.commodity.crystal;
				let myCrystal = this.userStore.user.crystal;
				let useSprint = this.commodity.sprint;
				let mySprint = this.userStore.user.sprint;
				
				if(myCrystal < useCrystal){
					this.dlgData.title = '温馨提示';
					this.dlgData.text = `水晶不足，需要${useCrystal}才能兑换`;
					this.dlgData.btnText = '好的'
					this.dlgData.cbTap = () => {
						this.isShowDlg = false;
					}
					this.isShowDlg = true;				
					return;
				}
				console.log('mySprint:', mySprint);
				console.log('useSprint:', useSprint);
				if( mySprint < useSprint){
					this.dlgData.title = '温馨提示';
					this.dlgData.text = `因兑换人数众多，需要拥有${useSprint}张冲刺卡才能兑换该商品。每邀请一位好友必得一张冲刺卡，点击前往邀请。`;
					this.dlgData.btnText = '好的'
					this.dlgData.cbTap = () => {
						this.isShowDlg = false;
						uni.switchTab({
							url:'/pages/my/my'
						});
						uni.$emit('SHOW_INVITE');
					}
					this.isShowDlg = true;				
					return;
				}
								
				$http.request({
					url:'index/exchange',
					token:true,
					data:{
						id:this.commodity.id,
						cateId:this.cateId,
						commodityIdx:this.commodityIdx,
						address,
						memo:this.memo,
						src:'crystal'
					}
				}).then( res => {
					this.userStore.user.crystal = res.data.crystal;
					this.userStore.user.sprint = res.data.sprint;
					uni.showToast({
						title:'兑换成功!',
						icon:'none'
					});
					uni.navigateTo({
						url:'/pages/exchange-list/exchange-list'
					});
				}).catch( () => {
					uni.showToast({
						title:'兑换失败',
						icon:'none'
					})
				});					
			}
		},
		onLoad(e) {
			this.cateId = e.cateId;
			this.commodityIdx = e.commodityIdx;
			this.commodity = this.commodityStore.commodity[e.cateId][e.commodityIdx];
			if(this.userStore.user.user_data.address.defaultIdx > -1){
				this.pathIndex = this.userStore.user.user_data.address.defaultIdx;
			};
			
			uni.$on('EVENTS_SEL_PATH', (result) => {
				this.pathIndex = result;
			})
		}
	}
</script>

<style scoped>
	.main{
		width: 100vw;
		height: 100vh;
		font-size: 28rpx;
		color: #959595;
		background-color: #F6F6F6;
	}
	.order{
		background-color: white;
		border-radius: 20rpx;
		margin: 16rpx;
	}
	.order-com{
		display: flex;
		padding: 32rpx 16rpx;
	}
	.order-com-img-box{
		flex:1;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.order-com-img{
		width: 100rpx;
		height: 100rpx;
	}
	.order-com-name{
		flex:4;
		font-size: 28rpx;
		font-weight: bold;
		color:black
	}
	.order-trans{
		display: flex;
		padding: 32rpx 16rpx;
	}
	.order-trans-label{
		flex:1
	}
	.order-trans-text{
		flex: 4;
		color:black;
	}
	.addr{
		background-color: white;
		border-radius: 20rpx;
		margin: 16rpx;
		line-height: 60rpx;
	}
	.addr-info{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx;
	}
	.addr-info-left{
		display: flex;
		align-items: center;
	}
	.addr-info-left-span{
		height: 30rpx;
		width: 10rpx;
		background-color: #ABA6FB;
		border-radius: 10rpx;
		display: inline-block;
	}
	.addr-info-left-text{
		padding: 16rpx;
		color: black;
	}
	.addr-path{
		display: flex;
		padding: 16rpx;
	}
	.addr-path-left{
		flex:1;
	}
	.addr-path-right{
		flex: 3;
		color: black;
	}
	.addr-path-right-area{
		display: flex;
		justify-content: space-between;
	}
	.addr-path-right-area-arrow{
		color: #959595
	}
	.addr-memo{
		display: flex;
		padding: 16rpx;
		align-items: center;
	}
	.addr-memo-label{
		flex:1;
	}
	.addr-memo-text{
		flex:3;
		color:black;
		font-size: 28rpx;
	}
	.op{
		margin: 80rpx 16rpx 0;
		font-size: 32rpx;
		color:black;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.op-rule-text{
		display: inline-block;
	}
	.op-rule-text-rule{
		color:#ABA6FB;
	}
	.op-confirm{
		margin-top: 50rpx;
		width: 300rpx;
		height: 84rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		left: 0;
		top: 0;
	}
	.op-confirm-img{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}
	.op-confirm-text{
		font-size: 38rpx;
		color: white;
		z-index: 999;
	}
</style>
